<template>
  <a-row :gutter="24">
    <a-col :span="7">
      <a-card :bordered="false">
        <section class="info">
          <div class="left-info">
            <div class="avatar">
              <img :src="info.commercialImage||'/logo.png'">
            </div>
            <div class="username">宠物管理</div>
          </div>
          <div class="right-info">
            <section>
              <p class="mb-0 balance-title">总收益(元)</p>
              <p class="mb-0 balance-value">{{ $utils.numberConversion(info.income) }}</p>
            </section>
            <a-divider style="height:60px;" type="vertical"/>
            <section>
              <p class="mb-0 balance-title">总订单数</p>
              <p class="mb-0 balance-value">{{ info.orderCount || 0 }}</p>
            </section>
            <a-divider style="height:60px;" type="vertical"/>
            <section class="mr-24">
              <p class="mb-0 balance-title">服务商数</p>
              <p class="mb-0 balance-value">{{ info.vendorCount || 0 }}</p>
            </section>
          </div>
        </section>
      </a-card>
    </a-col>
    <a-col :span="17">
      <a-card title="流水列表">
        <template slot="extra">
          <a-button
            v-if="$permissionJudge('PlatformBillAdd')"
            style="float: right"
            type="primary"
            icon="plus"
            @click="createWater()"
          >新建
          </a-button>
        </template>
        <section>
          <section class="filter-bar mb-16">
            <span class="ml-10 label">流水时间：</span>
            <a-range-picker style="width:320px;" allow-clear :placeholder="['起始时间', '终止时间']" show-time v-model="timeArr"
                            @ok="search"></a-range-picker>
            <span class="ml-10 label">流水类型：</span>
            <a-select
              class="mr-24 w-140"
              allow-clear
              placeholder="选择流水类型"
              v-model="type"
              @change="search"
            >
              <a-select-option v-for="item in waterTypeList" :value="item.value" :key="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button class="ml-8" @click="reset">重置</a-button>
          </section>
          <a-table
            class="table-con"
            row-key="id"
            :loading="loading"
            :columns="columns"
            :data-source="data"
            :pagination="pagination"
          >
            <template #orderId="val">
              <a-tooltip :title="val">
                <span class="overflow" style="display: inline-block;max-width:140px;">{{ val }}</span>
              </a-tooltip>
            </template>
            <template #remark="val">
              <a-tooltip :title="val">
                <span class="overflow" style="display: inline-block;max-width:240px;">{{ val }}</span>
              </a-tooltip>
            </template>
          </a-table>
          <a-modal
            :maskClosable="false"
            :title="'新增账户流水信息'"
            :width="650"
            :visible="showModal"
            :confirm-loading="confirmLoading"
            :ok-type="'primary'"
            @ok="confirmOk"
            @cancel="cancel"
          >
            <a-form :form="form">
              <a-row :gutter="[24,0]">
                <a-col :span="24">
                  <a-form-item class="mb-15" label="流水金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input
                      class="w-full"
                      placeholder="请输入流水金额(元)，正数为收入，负数为支出"
                      v-decorator="[
											'amount',
											{rules: [{required: true,whitespace: true,validator:amountValidator}]}
										]"
                      maxLength="15"
                    ></a-input>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="[24,0]">
                <a-col :span="24">
                  <a-form-item class="mb-15" label="流水备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-textarea
                      placeholder="请输入流水备注"
                      v-decorator="[
											'remark',
											{rules: [{required: true,whitespace: true,message: '请输入流水备注'}]}
										]"
                      :auto-size="{ minRows: 3, maxRows: 5 }"
                      maxLength="300"
                    ></a-textarea>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </a-modal>
        </section>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import {getPlatformDetail, getPlatformBillList, addPlatformBill} from '@/api/water'

export default {
  name: 'WaterList',
  mixins: [tableMixins],
  data() {
    return {
      info: {},
      labelCol: {span: 4},
      wrapperCol: {span: 20},
      showModal: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      loading: false,
      columns: [
        {dataIndex: 'id', title: '流水号', align: 'center'},
        {dataIndex: 'createTime', title: '流水时间', align: 'center'},
        {dataIndex: 'amount', title: '金额(元)', align: 'center'},
        {dataIndex: 'typeDesc', align: 'center', title: '流水类型'},
        {dataIndex: 'remark', align: 'center', title: '备注', scopedSlots: {customRender: 'remark'}, width: 260}
      ],
      data: [],
      timeArr: [undefined, undefined],
      type: undefined
    }
  },
  created() {
    this.getData()
    //流水类型数据字段
    this.$utils.getDictList('BillSimpleType').then(res => {
      this.waterTypeList = res
    })
  },
  methods: {
    amountValidator(rule, value, callback) {
      const amount = value && value.trim()
      const isAmount = /^(\-|\+)?\d+(\.\d{1,2})?$/
      if (amount === '' || typeof amount === 'undefined') {
        callback('请输入流水金额(元)，正数为收入，负数为支出')
      }
      if (amount * 1 === 0 || amount && !isAmount.test(amount)) {
        callback(new Error('请输入正数或负数且保留两位小数'))
      } else {
        callback()
      }
    },
    confirmOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          values.amount = values.amount * 1
          this.confirmLoading = true
          addPlatformBill({
            ...this.$utils.trimValue(values)
          }).then(() => {
            this.$message.success('新建成功！')
            this.getData()
            this.cancel()
          }).finally(() => this.confirmLoading = false)
        }
      })
    },
    //新建流水
    createWater() {
      this.showModal = true
    },
    search() {
      this.pageNum = 1
      this.getData()
    },
    reset() {
      this.type = undefined
      this.timeArr = [undefined, undefined]
      this.search()
    },
    getData() {
      this.loading = true
      const {rowsNum, pageNum, timeArr, type} = this
      getPlatformDetail().then(data => {
        this.info = data
      })
      getPlatformBillList({
        startTime: this.$utils.getStartTime(timeArr[0]),
        endDateTime: this.$utils.getEndTime(timeArr[1]),
        rowsNum, pageNum, type
      }).then(res => {
        const {items, rowCount} = res
        this.data = items
        this.total = rowCount
      }).finally(() => {
        this.loading = false
      })
    },
    cancel() {
      this.confirmLoading = false
      this.form.resetFields()
      this.showModal = false
    }
  }
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center
}

.info {
}

.left-info {
  text-align: center;

  .left-header-con {
    display: flex;
    justify-content: space-between;
  }

  & > .avatar {
    margin: 0 auto;
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
    border-radius: 50%;
    overflow: hidden;

    img {
      height: 100%;
      width: 100%;
    }
  }

  .username {
    margin-bottom: 24px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
  }
}

.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

}

.right-info {
  .flex;
  flex: 1;
  justify-content: space-between;

  .balance-title {
    color: #999;
    text-align: center;
  }

  .balance-value {
    font-size: 22px;
    line-height: 44px;
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
  }
}

.infoTitle {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 24px;
}

.enabled-con {
  position: relative;

  .enabled-mack {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}
</style>
